<!--
 * @description: 功能
 * @author: Yoke
 * @Date: 2024-08-28 22:30:58
-->
<script setup lang="ts">
import { NavigateNextRound } from '@vicons/material';
import { FormInst, NButton, NForm } from 'naive-ui';
import { inject, provide, reactive, ref, toRefs } from 'vue';
import { rules1, type FormValueTypes } from "./index.ts";
import PowerSupplyEquipment from './table/PowerSupplyEquipmentTable.vue';
import upload from "@/components/upload.vue";
import DevicePowerRequirements from "./table/DevicePowerRequirements.vue";
const formRef = ref<FormInst | null>(null)

const state = reactive<{
    model: Partial<FormValueTypes>
}>({
    model: {}
})


const { model: formValue } = toRefs(state)
provide('formValue', state.model)

const steps = inject('steps') as any

const nextStep = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            steps.setData({
                step3: state.model
            })
            steps.next()
        }
    })
}


const prevStep = () => {
    steps.prev()
}

</script>
<template>
    <div>
        <NForm :model="formValue" ref="formRef" :rules="rules1" require-mark-placement="left">
            <n-card title="设备供电需求表" class="mt-4">
                <DevicePowerRequirements v-model:value="formValue.wy1" />
            </n-card>
            <n-card title="需布放的线缆及路由" class="mt-4">
                <n-grid x-gap="12" :cols="4">
                    <n-gi>
                        <n-form-item label="路由走线图" path="img1">
                            <upload v-model:value="formValue.img1" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
            </n-card>
            <n-card title="配套材料及设备表" class="mt-4">
                <PowerSupplyEquipment v-model:value="formValue.wy" />
            </n-card>
            <n-card title="现场勘查相关图纸" class="mt-4">
                <n-grid x-gap="12" :cols="4">
                    <n-gi>
                        <n-form-item label="勘察图纸" path="text1">
                            <upload v-model:value="formValue.img1" />
                        </n-form-item>
                    </n-gi>
                    <n-gi>
                        <n-form-item label="现场环境照片" path="text1">
                            <upload v-model:value="formValue.img1" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
            </n-card>
        </NForm>
        <n-space>
            <NButton type="primary" @click="prevStep" class="my-4">
                上一步
                <template #icon>
                    <NIcon class="rotate-180">
                        <NavigateNextRound />
                    </NIcon>
                </template>
            </NButton>
            <NButton type="primary" icon-placement="right" @click="nextStep" class="my-4">
                提交数据并下载文件
            </NButton>
        </n-space>
    </div>
</template>